<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>育才课堂</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/classroom.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="main">
			<div class="background">
				<img src="img/23@3x.png" width="100%" height="100%" />
			</div>
			<div class="c_img">
				<div class="banner" id="banner" v-cloak style="height: 33.9%;overflow: hidden;width: 100%;z-index: 99;">
					<div style="height:100%;">
						<img v-for="banners in banner_all.banner_pics" :src="banners" width="90%" height="100%" style="border-radius: 1rem 1rem 0 0;" />
					</div>
				</div>
				<div class="all">
					<div class="menu">
						<div class="menu_act">班级</div>
						<div>视频</div>
						<img src="img/xian.png" style="position: absolute;width: 100%;height: 1rem;bottom: 0;" />
					</div>
					<div class="content">
						<div class="content_list" id="content">
							<ul v-cloak>
								<li v-for="(item,index) in classes">
									<a :href="path+'test/test.html?id='+item.paper_id + '&course_type=' + null">{{item.class_name}}</a>
								</li>
							</ul>
						</div>
						<div class="content_list_v" id="video">
							<ul v-cloak>
								<li v-for="item in video">
									<a :href="'curriculum_video.html?id='+item.chapter_id+'&course_type='+7">
										<img :src="item.chapter_pic" />
										<span></span>
										<img src="img/36@2x.png" />
										<div>{{item.chapter_name}}</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			getOpenId();
			if(!getData('token')) {
				window.location.href = path + 'login.html'
			}
			//获取视频接口
			$.ajax({
				url: apiPath + 'course/get-info',
				type: 'post',
				dataType: 'json',
				data: {
					open_id: open_id,
					token: getData('token'),
					course_type: 7,
					extend_type: 0,
					flagsign: 1
				},
				success: function(data) {
					var video = new Vue({
						el: '#video',
						data: {
							video: data.returnData.chapter
						},
					})
				}
			});
			//获取班级接口
			$.ajax({
				url: apiPath + 'course/get-class',
				type: 'post',
				dataType: 'json',
				data: {
					token: getData('token'),
					flagsign: 1
				},
				success: function(data) {
					var classroome = new Vue({
						el: '#content',
						data: {
							classes: data.returnData
						},
					})
				}
			});

			//调用轮播图接口,淘淘图书馆
			$.ajax({
				url: apiPath + 'common/banner',
				type: 'post',
				dataType: 'json',
				data: {
					banner_type: 4,
					flagsign: 1
				},
				success: function(data) {
					var right = new Vue({
						el: '#banner',
						data: {
							banner_all: data.returnData,
						},
						mounted: function() {
							var index = 0;

							function play(index) {
								// 大图切换 ：大图显示，其余的大图隐藏（当前元素的前后兄弟元素隐藏）
								$(".banner>div img").eq(index).show().siblings('img').hide();
							}
							// 自动播放
							function autoPlay() {
								//创建定时器，每一毫米调用一次play()
								timer = setInterval(function() {
									//下一张 索引值++
									index++;
									//边界判断 索引值=10，重新赋值
									index = index % data.returnData.banner_pics.length;
									//调用play()
									play(index);
								}, 2000);
								//		console.log(timer);

							};
							// 启动自动播放
							autoPlay();
						}
					});
				}
			});
			$(".menu div").bind("click", function() {
				var index = $(this).index();
				$(this).addClass("menu_act");
				$(this).siblings().removeClass("menu_act");
				$('.content').children('div').eq(index).show().siblings().hide();
			});
			$(".menu div").eq(0).click();
		</script>
	</body>

</html>